import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';

import {
    Tabs, Icon, Button,
    Modal,
    WhiteSpace,
    WingBlank,
    Toast, Flex, Tag, DatePicker, List,Picker,
    Provider,
} from '@ant-design/react-native';
const Item = List.Item;
const Brief = Item.Brief;
const styles = StyleSheet.create({

    tabText: {
        fontSize: 10,
        color: "#000",
    },
    tabValText: {
        fontSize: 12,
        color: "#ccc",
        textAlign: "right"
    },
    titleText: {
        fontSize: 12,
        color: "#B8B8B8"
    }

});

  
export default class Video_Details extends Component {
    static navigationOptions = props => {

        return {
            headerTitle: `#1燃气站#1摄像头          `,
            headerTintColor: "#fff",
            headerTitleStyle: {
                flex: 1,
                textAlign: 'center',
                fontSize: 16
            },
            headerStyle: {
                backgroundColor: "#3296FA",
            }
        }
    };


    onClose2 = () => {
        this.setState({
            visible2: false,

        });
    };
    onClose3 = () => {
        this.setState({
            visible3: false,
        });
    };
    state = {
        visible2: false,
        visible3: false,
        tabstate: 0,
        value: undefined,
    };


    ontabs = (v, b) => {
        console.log(v, b)
        this.setState({
            tabstate: b
        })
    }

    onDatePicker = (value) => {
        console.log(value)
        this.setState({ value });
    };
    render() {
        const icon = <View style={{ justifyContent: 'center', flexDirection: "row", display: "flex" }}><Text>实时视频</Text>
            <Icon name={"caret-down"} size="md" onPress={() => this.setState({ visible2: true })} style={{ opacity: this.state.tabstate ? 0 : 1 }} />
        </View>
        const icon1 = <View style={{ justifyContent: 'center', flexDirection: "row", display: "flex" }}><Text>历史视频</Text>
            <Icon name={"caret-down"} size="md" onPress={() => this.setState({ visible3: true })} style={{ opacity: !this.state.tabstate ? 0 : 1 }} />
        </View>
        const tabs = [
            {
                title: icon,

            },
            { title: icon1 },

        ];
        const style = {
            alignItems: 'center',
            justifyContent: 'center',
            flex: 1,
            backgroundColor: '#fff',
        };

        const topClire3 = [
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
            {
                name: 1
            },
        ]



        return (

            <View style={{ flex: 1, justifyContent: 'center', backgroundColor: "#F2F2F2" }}>
                <View style={{ flex: 1, marginBottom: 10, backgroundColor: "#fff" }}>
                    <View style={{ flex: 4 }}>

                    </View>

                    <View style={{ flex: 2, paddingLeft: 20 }}>
                        <Text style={{ fontSize: 16, color: "#000" }}>视频信息</Text>
                        <Text style={{ fontSize: 12, color: "#999", marginTop: 10, marginBottom: 10 }}>#1企业 · #1燃气站 · #1摄像头</Text>
                        <Text style={{ fontSize: 12, color: "#999" }}>安全负责人王静静 · 15712345465</Text>
                    </View>
                </View>
                <View style={{ flex: 1.2, backgroundColor: "#fff" }}>
                    <View style={{ height: 30, paddingLeft: 20 }}>
                        <Text style={{ fontSize: 16, color: "#000", lineHeight: 30 }}>相关视频</Text>
                    </View>

                    <ScrollView
                        style={{ flex: 1, paddingTop: 10, backgroundColor: "#fff" }}
                    // automaticallyAdjustContentInsets={false}
                    // showsHorizontalScrollIndicator={false}
                    // showsVerticalScrollIndicator={false}
                    >
                        <View style={{ flex: 1, display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "space-around" }}>
                            {
                                topClire3.map((item, index) => {
                                    return (
                                        <View key={index}

                                        >
                                            <TouchableOpacity
                                                style={{ width: 150, height: 100, borderRadius: 10, backgroundColor: "#ccc", marginTop: 10 }}
                                                activeOpacity={0.5}
                                                onPress={() => {
                                                    this.props.navigation.navigate("Video_Details")
                                                }}
                                            >

                                            </TouchableOpacity>
                                            <Text style={{ color: "#000" }}>#1摄像头</Text>
                                        </View>
                                    )
                                })
                            }
                        </View>





                    </ScrollView>
                </View>
            </View>
        )
    }
}

